<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="hover">
        <div slot="header" class="clearfix">
          <span>{{ titles }}</span>
        </div>

        <el-form
          ref="defts"
          class="form"
          label-position="left"
          label-width="100px"
          :model="defts"
          :rules="rules"
        >
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              class="input"
              v-model="defts.subjectID"
              @change="getdireData"
            >
              <el-option
                v-for="item in subjectName"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select class="input" v-model="defts.catalogID">
              <el-option
                v-for="item in directoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select class="input" v-model="defts.enterpriseID">
              <el-option
                v-for="item in enterpriselist"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" prop="city">
            <el-select
              v-model="defts.province"
              placeholder="请选择"
              @change="getcitys"
            >
              <el-option
                v-for="item in provincecity"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select v-model="defts.city" placeholder="请选择">
              <el-option
                v-for="item in cityData"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select class="input" v-model="defts.direction">
              <el-option
                v-for="item in directionlist"
                :key="item.id"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" prop="questionType">
            <el-radio-group v-model="defts.questionType" @change="querChange">
              <el-radio
                v-for="item in questionType"
                :key="item.value"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="defts.difficulty">
              <el-radio
                v-for="item in difficulty"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干:" class="text" prop="question">
            <div class="quill">
              <quillEditor
                id="editor"
                :options="editorOption"
                v-model="defts.question"
              ></quillEditor>
            </div>
          </el-form-item>
          <el-form-item
            label="选项:"
            v-if="
              defts.questionType === '1' || defts.questionType === '2'
                ? true
                : false
            "
            prop="options"
          >
            <el-form-item
              v-for="(item, index) in DataList"
              :key="item.id"
              :value="item"
            >
              <el-radio-group
                @click.native="clickRadio(index)"
                v-if="defts.questionType === '1'"
                v-model="defts.options[index].isRight"
              >
                <el-radio :label="true" style="margin-right: 30px">
                  <span>{{ item }}:</span>
                </el-radio>
              </el-radio-group>

              <el-checkbox
                v-else
                :label="true"
                style="margin-right: 30px"
                v-model="defts.options[index].isRight"
              >
                <span>{{ item }}:</span>
              </el-checkbox>

              <el-input
                class="radioinput"
                v-model="defts.options[index].title"
              ></el-input>
              <el-upload
                action="#"
                class="avatar-uploader"
                :show-file-list="false"
              >
                <span class="span">上传图片</span>
                <i class="el-icon-circle-close"></i>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                size="mini"
                :disabled="defts.questionType === '2' ? false : true"
                @click="addDataClick"
                >+增加选项与答案</el-button
              >
            </el-form-item>
          </el-form-item>

          <el-form-item label="解析视频:" prop="videoURL">
            <el-input class="input" v-model="defts.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答题解析:" class="text" prop="answer">
            <div class="quill">
              <quillEditor
                id="editor"
                :options="editorOption"
                v-model="defts.answer"
              ></quillEditor>
            </div>
          </el-form-item>
          <el-form-item label="题目备注:" prop="remarks">
            <el-input type="textarea" v-model="defts.remarks"></el-input>
          </el-form-item>
          <el-form-item label="试题标签:" prop="tags">
            <el-select
              class="input"
              v-model="defts.tags"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in tagslist"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="questionsClick"
              >确认提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple as tagsListAPI } from '@/api/hmmm/tags'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as directoryListAPI } from '@/api/hmmm/directorys'
import { list as enterpriseAPI } from '@/api/hmmm/companys'
import { add, detail, update } from '@/api/hmmm/questions'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      editorOption: {
        modules: {
          toolbar: {
            container: [
              // 设置自己需要的工具
              ['bold', 'italic', 'underline', 'strike'],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['blockquote', 'code-block'],
              ['image', 'link']
            ]
          }
        }
      },
      defts: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: []
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入题干', trigger: 'blur' }]
      },
      //

      subjectName: [],
      directoryList: [],
      enterpriselist: [],
      directionlist: [],
      provincecity: [],
      cityData: [],
      questionType: [],
      difficulty: [],
      tagslist: [],
      DataList: ['A', 'B', 'C', 'D']
    }
  },
  created () {
    this.getdeftsData()
    this.citylist()
    if (this.$route.query.id) {
      this.getquesrionsDetail()
    }
  },
  computed: {
    titles () {
      if (this.$route.query.id) {
        return '试题修改'
      } else {
        return '试题录入'
      }
    }
  },
  methods: {
    async getquesrionsDetail () {
      const { data } = await detail({ id: this.$route.query.id })
      const res = await directoryListAPI(data)
      this.directoryList = res.data
      const edd = await tagsListAPI(data)
      this.tagslist = edd.data
      data.tags = data.tags ? data.tags.split(',') : []

      this.defts = data
      data.options.map((item, index) => {
        this.defts.options[index].isRight = !!item.isRight
      })
    },
    // 点击事件，添加选项
    addDataClick () {
      const a = this.DataList[this.DataList.length - 1] // 获取选项数组的追后一个选项
      const b = a.charCodeAt() + 1 // 将选项的字符转化为ascii码并且加一
      const c = String.fromCharCode(b) // 将加一后的ascii码重新转化为字符
      this.DataList.push(c) // 将转化后的字符加入数组
      // { isRight: false, code: 'D', title: '', img: '' }
      this.defts.options.push({ isRight: false, code: c, title: '', img: '' })
    },
    clickRadio (index) {
      this.defts.options.forEach(item => {
        item.isRight = false
      })
      this.defts.options[index].isRight = true
    },
    changeRadio () {
      this.defts.options.forEach(item => {
        item.isRight = false
      })
    },
    // 监听城市变化
    async citylist () {
      this.provincecity = await provinces()
    },
    // 区县列表
    async getcitys () {
      this.defts.city = ''
      this.cityData = await citys(this.defts.province)
    },
    // 题型发生改变清空选项
    querChange () {
      this.defts.options.map((item, index) => {
        this.defts.options[index].isRight = false
      })
      if (this.defts.questionType === '2') {
        this.defts.options.map((item, index) => {
          this.defts.options[index].isRight = false
        })
      }
    },
    // 获取数据
    async getdeftsData () {
      this.subjectName = (await simple()).data
      this.enterpriselist = (await enterpriseAPI()).data.items
      this.directionlist = direction
      this.provincecity = provinces()
      // 获取题型
      this.questionType = questionType
      // 获取难度
      this.difficulty = difficulty
    },
    // 监听学科的变换
    async getdireData () {
      this.defts.catalogID = ''
      this.defts.tags = []
      this.direcData()
      // 监听学科变化掉接口yy
      this.tagsLData()
    },
    async direcData () {
      const dire = (await directoryListAPI(this.defts)).data
      this.directoryList = dire
    },
    async tagsLData () {
      this.tagslist = (await tagsListAPI(this.defts)).data
    },
    questionsClick () {
      this.$refs.defts.validate(async isOK => {
        if (isOK) {
          const res = this.defts.tags.join(',')
          if (this.$route.query.id) {
            await update({
              ...this.defts,
              tags: res
            })
            this.$message.success('修改题目成功')
          } else {
            await add({
              ...this.defts,
              tags: res
            })
            this.$message.success('添加题目成功')
          }
          this.$router.push('/questions/list')
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.form {
  margin-left: 50px;
  .ql-editor {
    height: 200px;
  }
  .input {
    width: 400px;
  }
  .radioinput {
    width: 250px;
    height: 30px;
    margin: 10px 0;
    line-height: 60px;
  }
  .avatar-uploader {
    width: 100px;
    height: 60px;
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    position: relative;
    left: 5px;
    text-align: center;
    line-height: 60px;
    .el-icon-circle-close {
      position: absolute;
      top: -5px;
      right: -7px;
      background-color: #fff;
      font-size: 20px;
    }
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .quill {
    width: 500px;
    height: 200px;
    #editor {
      width: 100%;
      height: 85%;
      padding-bottom: 30px;
    }
  }
  .text {
    margin-bottom: 30px;
    display: inline-block;
  }
}

.clearfix:after {
  clear: both;
}
</style>
